<template>
    <rx-dialog :showok="false" :showcancel="false">
        <rx-layout>
            <div slot="center" style="padding: 20px 20px 0px 20px;display: flex;flex-direction: column">
                <div style="flex: 1;display: flex;flex-direction: column">
                    <div>
                        <a-steps :current="current">
                            <a-step v-for="item in steps" :key="item.title" :title="item.title" />
                        </a-steps>
                    </div>
                    <div class="steps-content"  style="flex: 1;margin-top: 20px">
                        <div v-if="current===0" style="height: 100%">
                            <rx-grid
                                style="height: 100%"
                                ref="table1"
                                :key="current"
                                :columns="columns"
                                :dataSource="dataSource"
                                :allowRowSelect="false"
                                :showPage="false"
                            >
                               <span slot="appId" slot-scope="{ text, record }">
                                     {{getAppName(record.appId)}}
                                </span>
                                <span slot="newAppId" slot-scope="{ text, record }">
                                      <a-select
                                          style="width: 100%;"
                                          :options="appData"
                                          v-model="record.newAppId"
                                          @change="getByCatKey(record.newAppId)"
                                          allowClear>
                                      </a-select>
                                </span>
                            </rx-grid>
                        </div>
                        <div v-else-if="current==1" style="height: 100%">
                            <rx-grid
                                style="height: 100%"
                                ref="table2"
                                :key="current"
                                :columns="columns1"
                                :dataSource="dataSource"
                                :allowRowSelect="false"
                                :showPage="false"
                            >
                                 <span slot="appId" slot-scope="{ text, record }">
                                     {{getAppName(text)}}
                                </span>
                                <span slot="newAppId" slot-scope="{ text, record }">
                                     {{getAppName(text)}}
                                </span>
                                <span slot="categoryId" slot-scope="{ text, record }">
                                    {{getCategoryName(text)}}
                                </span>
                                <span slot="newCategoryId" slot-scope="{ text, record }">
                                    <a-tree-select
                                        style="width: 100%"
                                        :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
                                        :treeData="treeData[record.newAppId] || []"
                                        :getPopupContainer="p=>p.parentNode"
                                        allowClear
                                        :multiple="false"
                                        v-model="record.newCategoryId"
                                        :placeholder="$ti18('rxDecorator.select','请选择')">
                                    </a-tree-select>
                                </span>
                            </rx-grid>
                        </div>
                        <div v-else-if="current==2" style="height: 100%">
                            <rx-grid
                                style="height: 100%"
                                ref="table3"
                                :key="current"
                                :columns="columns1"
                                :dataSource="dataSource"
                                :allowRowSelect="false"
                                :showPage="false"
                            >
                                 <span slot="appId" slot-scope="{ text, record }">
                                     {{getAppName(text)}}
                                </span>
                                <span slot="newAppId" slot-scope="{ text, record }">
                                     {{getAppName(text)}}
                                </span>
                                <span slot="categoryId" slot-scope="{ text, record }">
                                    {{getCategoryName(text)}}
                                </span>
                                <span slot="newCategoryId" slot-scope="{ text, record }">
                                    {{getTreeName(text,record.newAppId)}}
                                </span>
                            </rx-grid>
                        </div>
                    </div>
                </div>
                <div class="steps-action">
                    <a-button v-if="current < steps.length - 1" type="primary" @click="next">
                        {{i18n('list.nextStep','下一步')}}
                    </a-button>
                    <a-button
                        v-if="current == steps.length - 1"
                        type="primary"
                        @click="onOk"
                    >
                        {{i18n('list.confirmChange','确认变更')}}
                    </a-button>
                    <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
                        {{i18n('list.return','返回')}} {{i18n('list.previous','上一步')}}
                    </a-button>
                </div>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {RxLayout, RxGrid, Util,RxDialog} from "@lowcode/jpaas-common-lib";
import OsUserApi from "@/api/user/org/osUser";
import SysTreeApi from "@/api/system/core/sysTree";

export default {
    name: "ChangeAppDialog",
    props:{
        layerid:{
            type:String
        },
        lydata:{
            type:Object
        },
        destroy:Function,
        data:{
            type:Array,
            default:()=>[]
        },
        catKey:{
            type:String
        }
    },
    components:{
        RxLayout,
        RxGrid,
        RxDialog
    },
    data() {
        return {
            dataSource:[],
            columns: [
                {title: this.$ti18('rxForm.id','主键'), dataIndex: 'pkId',width:80},
                {title: this.i18n('form.name','名称'), dataIndex: 'name',width:80},
                {title: this.i18n('form.originalApp','原所属应用'), dataIndex: 'appId',width:80,scopedSlots: {customRender: 'appId'}},
                {title: this.i18n('form.targetApp','目标所属应用'), dataIndex: 'newAppId',width:80,scopedSlots: {customRender: 'newAppId'}}
            ],
            columns1: [
                {title: this.$ti18('rxForm.id','主键'), dataIndex: 'pkId',width:80},
                {title: this.i18n('form.name','名称'), dataIndex: 'name',width:80},
                {title: this.i18n('form.originalApp','原所属应用'), dataIndex: 'appId',width:80,scopedSlots: {customRender: 'appId'}},
                {title: this.i18n('form.targetApp','目标所属应用'), dataIndex: 'newAppId',width:80,scopedSlots: {customRender: 'newAppId'}},
                {title: this.i18n('form.originalClassify','原所属分类'), dataIndex: 'categoryId',width:80,scopedSlots: {customRender: 'categoryId'}},
                {title: this.i18n('form.targetClassify','目标所属分类'), dataIndex: 'newCategoryId',width:80,scopedSlots: {customRender: 'newCategoryId'}}
            ],
            current: 0,
            steps: [
                {
                    title: this.i18n('list.selectApp','选择应用'),
                },
                {
                    title: this.i18n('list.selectClassify','选择分类'),
                },
                {
                    title: this.i18n('list.confirmChange','确认变更'),
                    content: this.i18n('sureChange',"确定要变更吗？")
                },
            ],
            appData:[],//应用
            treeData:{},//变更分类
            categories:[]//原分类
        }
    },
    created() {
        this.dataSource=this.data;
        this.getAppByCurUser();
        this.getSteps();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formBoListDialog", key);
        },
        getAppByCurUser(){
            OsUserApi.getAppByCurUser().then(res=>{
                if(res && res.length>0){
                    this.appData=[];
                    res.find(item=>{
                        this.appData.push({
                            label:item.clientName,
                            key:item.clientCode,
                            value:item.appId,
                        })
                    });
                }
            });
        },
        getByCatKey(appId){
            if(this.treeData[appId]){
                return;
            }
            SysTreeApi.getByCatKey(this.catKey,appId).then(res=>{
                if(!res || res.length==0){
                    return [];
                }
                var ary=Util.listToTree(res,"treeId","parentId");
                Util.genTreeData(ary,"name","treeId","treeId");
                this.treeData[appId]=ary;
            })
        },
        getSteps(){
            //如果当前页面没有分类
            if(!this.catKey){
                //去掉变更分类的步骤
                this.steps.splice(1,1);
                this.columns1 = this.columns;
            }
        },
        getAppName(appId){
            var app=this.appData.find(item=>{
                if(item.value==appId){
                    return item;
                }
            });
            if(!app){
                return this.i18n('nothing','无');
            }
            return app.label;
        },
        getCategories(categoryIds){
            SysTreeApi.getByTreeIds(categoryIds).then(res=>{
                if(res && res.data){
                    this.categories=res.data;
                }
            });
        },
        getCategoryName(categoryId){
            var category=this.categories.find(item=>{
                if(item.treeId==categoryId){
                    return item;
                }
            });
            if(!category){
                return this.i18n('nothing','无');
            }
            return category.name;
        },
        getTreeName(categoryId,newAppId){
            let category=this.getTree(this.treeData[newAppId],categoryId);
            if(!category){
                return this.i18n('nothing','无');
            }
            return this.$i18(category.name,'目标所属分类');
        },
        getTree(treeData,categoryId){
            if(!treeData){
                return "";
            }
            for (let i = 0; i < treeData.length; i++) {
                let item=treeData[i];
                if(item.value==categoryId){
                    return item;
                }
                if(item.children && item.children.length>0){
                    let tree= this.getTree(item.children,categoryId);
                    if(tree){
                        return tree;
                    }
                }
            }
        },
        next() {
            //应用变更判断
            var categoryIds=[];
            if(this.current===0){
                for (let i = 0; i < this.dataSource.length; i++) {
                    if(!this.dataSource[i].newAppId || this.dataSource[i].appId==this.dataSource[i].newAppId){
                        this.$message.warning(this.dataSource[i].newAppId?this.i18n('notSame',"原所属应用不能与目标一致！"):this.i18n('appNotNull',"目标所属应用不能为空！"));
                        return;
                    }
                    if(this.dataSource[i].categoryId){
                        categoryIds.push(this.dataSource[i].categoryId);
                    }
                }
                //如果当前页面存在分类，才去查询分类
                if(this.catKey){
                    this.getCategories(categoryIds);
                }

            }else if(this.current===1){//分类判断
                for (let i = 0; i < this.dataSource.length; i++) {
                    if(!this.dataSource[i].newCategoryId){
                        this.$message.warning(this.i18n('notNull',"目标分类不能为空！"));
                        return;
                    }
                }
            }
            this.current++;
        },
        prev() {
            this.current--;
        },
        onOk(){
            var self=this;
            this.$confirm({
                title: this.i18n('changeSelect','确定要变更选中的数据吗?'),
                okText: this.$ti18('rxForm.okBtn','确定'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                zIndex:99999,
                onOk() {
                    Util.closeWindow(self,'ok',self.dataSource);
                },
                onCancel() {},
            });
        },
    },
    watch: {}
}
</script>

<style scoped>
.steps-action{
    text-align: center;
    margin-top: 20px;
}
.changeApp-img{
    width: 300px;
    margin: auto;
}
.changeApp-img img{
    width: 100%;
    margin-top: 30px;
}
.changeApp-span{
    text-align: center;
    display: block;
}
</style>